window.onload = () => {
  // 获取所有 item
  const items = document.querySelectorAll('div.item');

  // 当前激活的 item 索引
  let currentActiveItemIndex = 0;

  // 设置默认激活的 item
  items[currentActiveItemIndex].classList.add('itemActive');

  items.forEach((item, index) => {
    // 给每一个 item 绑定 click 事件
    item.addEventListener('click', () => {
      let elementIndex = index;

      if (currentActiveItemIndex === null) {
        // 当没有任何一个 item 激活时触发
        items[elementIndex].classList.add('itemActive');
        currentActiveItemIndex = elementIndex;
      } else if (currentActiveItemIndex === elementIndex) {
        // 当点击当前激活的 item 时触发
        items[elementIndex].classList.remove('itemActive');
        currentActiveItemIndex = null;
      } else {
        // 当点击其他 item 时触发
        items[currentActiveItemIndex].classList.remove('itemActive');
        items[elementIndex].classList.add('itemActive');
        currentActiveItemIndex = elementIndex;
      }
    });
  });
};
